<template>
	<view class="more-page">
		<view class="more-page-title">
			<view class="more-page-title-main">
				<t-icon name="chevron-left" size="26" @click="onBack" />
				<view class="more-page-title-main-center">
					<text class="more-page-title-main-center-main">{{ currItem.qqdx }}支撑群</text>
					<!-- <text class="more-page-title-center-sub">{{ currItem.zzmc }}&nbsp;{{ currItem.cjrmc }}发起</text> -->
				</view>
			</view>
			<t-tabs :value="currTabbar" :list="tabbarList" @change="onTabbarChange">
				<t-tab-panel value="基本信息"><ChartInfo :currItem="currItem" /></t-tab-panel>
				<t-tab-panel value="操作日志"><ChartLog :currItem="currItem" /></t-tab-panel>
				<t-tab-panel value="人员列表"><PersonList :currItem="currItem" /></t-tab-panel>
				<t-tab-panel value="人员邀请"><PersonSelect :currItem="currItem" /></t-tab-panel>
			</t-tabs>
		</view>
		<!-- <view class="more-page-content">
			<ChartInfo v-show="currTabbar == '基本信息'" />
			<ChartLog v-show="currTabbar == '操作日志'" />
			<PersonList v-show="currTabbar == '人员列表'" />
			<PersonSelect v-show="currTabbar == '人员邀请'" />
		</view> -->
	</view>
</template>

<script setup>
	import ChartInfo from "@/components/ChartInfo"
	import ChartLog from "@/components/ChartLog"
	import PersonList from "@/components/PersonList"
	import PersonSelect from "@/components/PersonSelect"
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from "vue"
	
	onLoad(async options => {
		if (!options.qqId) {
			Message['error']({ offset: [10, 16], content: '缺失请求id', icon: true });
			return;
		}
		await updateCurrItem(options.qqId);
	});
	
	const currItem = ref({});
	const tabbarList = ['基本信息', '操作日志', '人员列表', '人员邀请'].map(label => ({ label, value: label }));
	const currTabbar = ref('基本信息');
	
	const updateCurrItem = qqId => {
		return new Promise(resolve => {
			currItem.value = {
				id: qqId,
				ltsbh: 'chart1',
				ztzt: 2,
				ztnr: '一标三实',
				qqdx: '基础管控中心',
				cjrmc: '熊倡',
				cjrjh: '302871',
				zzmc: '科信科',
				cjrlxdh: '17358486814',
				qqsj: '2025-03-10 10:07:01',
				jjcd: '系统',
				nrms: '一标三实数据不一致，请仔细核查。一标三实数据不一致，请仔细核查。一标三实数据不一致，请仔细核查。一标三实数据不一致，请仔细核查。'
			}
			resolve();
		})
	}
	
	const onTabbarChange = value => {
		currTabbar.value = value;
	}
	
	const onBack = () => {
		uni.navigateBack();
	}
</script>

<style lang="scss" scope>
	.more-page {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #fafbff;
		
		&-title {
			position: relative;
			
			padding: 12px;
			background-color: #fff;
			border-bottom-left-radius: 12px;
			border-bottom-right-radius: 12px;
			box-shadow: 0px 6px 12px 0px rgba(#2A7AFF, 5%);
			
			&-main {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 12px;
				
				&-center {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					display: flex;
					flex-direction: column;
					justify-content: center;
					row-gap: 4px;
					
					&-main {
						font-weight: 500;
						font-size: 18px;
						text-align: center;
					}
					
					&-sub {
						font-size: 14px;
						color: #666666;
						text-align: center;
					}
				}
			}
			
			:deep(.t-tabs) {
				background: transparent;
			}
			:deep(.t-tabs__wrapper) {
				background: transparent;
			}
			:deep(.t-tabs__scroll) {
				height: 40px;
			}
			:deep(.t-tabs__item--top) {
				height: 40px;
			}
			:deep(.t-tabs__content) {
				position: fixed;
				left: 0;
				top: 115px;
				width: 100%;
				height: calc(100% - 115px);
				padding: 12px;
				padding-top: 0;
			}
			:deep(.t-tab-panel) {
				width: 100%;
				height: 100%;
				overflow: auto;
				background: #fff;
				border-radius: 12px;
				padding: 12px;
				box-shadow: 0px 0px 12px 0px rgba(#2A7AFF, 5%);
			}
		}
		
		&-content {
			flex: 1;
			padding: 12px;
			overflow: auto;
		}
	}
</style>